<template>
  <div class="image-preview-page">
    <div class="page-header">
      <h2 class="page-title">医学图像查看器</h2>
      <div class="page-description">
        查看和分析医学影像，支持多种窗宽窗位预设、图像调整和测量功能
      </div>
      
      <div class="filter-options">
        <a-space>
          <a-select v-model="imageType" placeholder="图像类型" style="width: 150px;">
            <a-option value="">全部类型</a-option>
            <a-option value="mask">掩码 (mask)</a-option>
            <a-option value="prob">概率图 (prob)</a-option>
            <a-option value="vis">可视化 (vis)</a-option>
            <a-option value="overlay">叠加图 (overlay)</a-option>
          </a-select>
          
          <a-input-number v-model="imageLimit" placeholder="数量限制" style="width: 120px;" :min="1" :max="100" />
          
          <a-button type="primary" @click="loadImages">加载图像</a-button>
        </a-space>
      </div>
      
      <div class="debug-actions">
        <a-input v-model="apiBaseUrl" placeholder="API基础URL" style="width: 250px; margin-right: 10px;" />
        <a-input v-model="imagePath" placeholder="图像路径" style="width: 200px;" />
        <a-button type="secondary" @click="testImageUrl" style="margin-left: 10px;">测试图像URL</a-button>
      </div>
      <div v-if="testUrl" class="test-url">
        <div>测试URL: {{ testUrl }}</div>
        <a-button type="text" @click="openImageInNewTab">在新标签页中打开</a-button>
      </div>
    </div>
    
    <div class="viewer-container">
      <ImageViewer 
        ref="imageViewer"
        :loadFromBackend="true"
        :apiBaseUrl="apiBaseUrl"
        :imagePath="imagePath"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import ImageViewer from '../components/ImageViewer.vue';
import { imageApi } from '../services/api';

// 可以在这里添加页面级别的逻辑
const imageViewer = ref(null);
const apiBaseUrl = ref('http://localhost:5000');
const imagePath = ref('/static/results');
const testUrl = ref('');

// 过滤选项
const imageType = ref('');
const imageLimit = ref(20);

const loadImages = async () => {
  try {
    if (imageViewer.value) {
      // 在调用loadImagesFromBackend之前，先获取过滤后的图像列表
      const response = await imageApi.getResults(imageType.value, imageLimit.value);
      
      if (response && response.success && response.results) {
        // @ts-ignore - 忽略类型检查
        imageViewer.value.loadFilteredImages(response.results);
      } else {
        console.error('获取图像列表失败');
        // @ts-ignore - 忽略类型检查
        imageViewer.value.loadImagesFromBackend();
      }
    }
  } catch (error) {
    console.error('加载图像失败:', error);
    // 出错时回退到默认加载方法
    if (imageViewer.value) {
      // @ts-ignore - 忽略类型检查
      imageViewer.value.loadImagesFromBackend();
    }
  }
};

const refreshImages = () => {
  if (imageViewer.value) {
    // @ts-ignore - 忽略类型检查
    imageViewer.value.loadImagesFromBackend();
  }
};

const testImageUrl = () => {
  // 测试一个图像URL
  testUrl.value = `${apiBaseUrl.value}${imagePath.value}/07a4d770-361d-4bba-9bba-f741ab67d0a6_mask.png`;
};

const openImageInNewTab = () => {
  if (testUrl.value) {
    window.open(testUrl.value, '_blank');
  }
};
</script>

<style scoped>
.image-preview-page {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.page-header {
  margin-bottom: 20px;
}

.page-title {
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 600;
}

.page-description {
  color: var(--color-text-3);
  font-size: 14px;
  margin-bottom: 15px;
}

.filter-options {
  margin-bottom: 15px;
}

.debug-actions {
  margin-top: 10px;
  display: flex;
  align-items: center;
}

.test-url {
  margin-top: 10px;
  padding: 10px;
  background-color: var(--color-fill-2);
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.viewer-container {
  flex: 1;
  background-color: var(--color-bg-2);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
</style> 